<script setup lang='ts'>
import { ref } from 'vue';
import { hope } from '../@types/hope';

const props = defineProps<{ cancel: Function, confirm: Function }>()

function onConfirm(): void {
  props.confirm();
}
function onCancel(): void {
  onClose();
  props.cancel();
}
function onClose(): void {
  hope.destroyDiv('updatePopup');
}

</script>
<template>
  <div class="popup flex">
    <div class="card">
      <div class="title"> 在问有新版本可用 </div>
      <a-space>
        <a-button type="primary" @click="onConfirm">更新</a-button>
        <a-button @click="onCancel">取消</a-button>
      </a-space>

    </div>
  </div>
</template>
<style lang='scss' scoped>
.popup {
  position: fixed;
  bottom: 20px;
  right: 20px;
  justify-content: center;
  z-index: 999;

  .card {
    padding: 20px 30px;
    background: var(--color-bg-1);
    border-radius: 10px;
    box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.1);
  }


  .title {
    color: var(--color-neutral-10);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
  }
}
</style>